<template>
	<view class="box bg-f7 padding-b-30">
		<view class="index-bg">
			<image :src="BASE_URL + '/uploads/20250801/674bab6663cf4e904e7de78ac58f8358.png'" mode="widthFix"></image>
		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#000"}' leftIconColor='#000' title=" 健康存折" bgColor="transparent"
				@rightClick="rightClick" :autoBack="true" :fixed="false"> </u-navbar>
			<view class="point-box justifyContent-spaceBetween align-items-center">
				<view class="flex-column">
					<view class="fs-28 color-0">
						<text class='fw-b margin-r-10'> {{userInfo.score|| 0}}</text>积分
					</view>
					<view class="fs-28 color-333 align-items-center">
						积分规则
						<image src='/static/image/healthPassbook/router.png' mode="aspectFill"></image>
					</view>
				</view>
				<view class="fs-28 color-white btn-box bg-e5" @click="goPoints">
					积分明细
				</view>
			</view>
			<view class="border-radio-14 padding-l-r-30 bg-f7">
				<view class="clock-box">
					<view class="fw-b color-0 fs-28 clock-title">
						健康服务站打卡
					</view>
					<view class="clock-content padding-10 border-radio-14">
						<view class="bg-white clock-main border-radio-14">
							<view class="fw-b fs-30 color-0 days-box flex-box padding-l-r-20">
								{{month}}月已打卡
								<text class="color-e5">{{signList.length || 0}} </text>
								天
								<!-- <text class="fs-22 color-e5 margin-l-20">连续30天打卡可额外加50分</text> -->
							</view>
							<view class=" padding-l-r-20">
								<view class="clock-list-box flex-box">
									<view v-for="(item,index) in list" :key="index" :class='{"active":item.isClock}'
										class="clock-list border-radio-20 align-items-center flex-column color-333 fs-26">
										<view class="points fw-b" v-if='index == 6 || index == 13'> +30</view>
										<view class="points fw-b" v-else>+10</view>
										<view class="color-9 fs-20" v-if='!item.isClock'>第{{index+1}}天</view>
										<view class="img-box margin-t-10" v-else>
											<image src="/static/image/healthPassbook/success.png" mode="widthFix">
											</image>
										</view>
									</view>
								</view>
							</view>
							<view class="clock-btn-box">
								<view class="btn-box bg-e5 color-white fs-28 " @click="clock">
									服务站打卡
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="video-box padding-l-r-30">
				<view class="video-title fs-30 fw-b">视频</view>
				<view class="bg-white padding-20 border-radio-14">
					<view v-for="(item,index) in videoList">
						<view class="line" v-show="index > 0"></view>
						<view class="flex-box padding-t-b-20">
							<view class="img-box border-radio-14">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view
								class="video-list-content flex-1 justifyContent-spaceBetween flex-column padding-l-r-20">
								<view class="video-list-title only-2 fs-30 color-0 fw-b">{{item.title}}</view>
								<view class="fs-20 color-70">
									{{item.createtime}}
								</view>
							</view>
							<view class="pay-btn border-radio-14 align-items-center fs-26 color-43"
								@click="goVidoe(item)">
								<image src='/static/image/healthPassbook/pay.png' mode="aspectFill"></image>
								播放
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-l-r-30">
				<view class="service-title justifyContent-spaceBetween">
					<text> 活动报名</text>
					<view class="registration">
						一键报名
					</view>
				</view>
				<view class="padding-l-r-20 bg-white ">
					<freeClinic :activityList='activityList' :hasLine='false' @goDetails='goDetails' @signUp='signUp'>
					</freeClinic>
				</view>
			</view>
		</view>
		<!-- 打开 -->
		<u-popup :show="show" mode="bottom" :round="10" :closeable='true' @close="show =false">
			<view class="pop-box bg-f7">
				<view class=" padding-30">
					<view class="pop-title fs-30 fw-b color-0">服务站打卡</view>
					<view class="tips-box fs-24 flex-box">
						<image src='/static/image/healthPassbook/tips.png' mode="aspectFill"></image>
						<text>每日首次到服务站打卡可获得10积分，每日限1次；连续7天打卡可额外获得20分，连续30天可额外获得50分，中断需重新计算</text>
					</view>
					<view class="upload-image">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" width="200" height="200" :previewFullImage="true">
							<image src="/static/image/healthPassbook/upload-image.png" mode="widthFix"></image>
						</u-upload>
					</view>
				</view>

				<view class="btn-box bg-white">
					<view class="btn border-radio-14 color-white fs-28" @click="signAdd">
						确认打卡
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		healthartList,
		signAdd,
		getSignList
	} from '@/api/healthPassbook.js'
	import {
		playList
	} from '@/api/service'
	import {
		getUserInfo
	} from '@/api/user'
	import freeClinic from '@/components/freeClinic/index.vue'
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl
	export default {
		components: {
			freeClinic,
		},
		data() {
			return {
				BASE_URL,
				point: 1258,
				list: [],
				videoList: [],
				activityList: [],
				show: false, //打卡弹窗
				fileList1: [],
				page: 1,
				isMore: true,
				month: '',
				token:'',
				signList: [],
				userInfo:{}
			}
		},
		onLoad() {

			this.getList()
			this.getVideoList()
			this.init()
			
		},
		onShow() {
			let token = uni.getStorageSync('token')
			this.token = token
			if (token) {
				this.getSignList()
				this.getUserInfo()
			}
		},
		//上拉加载函数
		onReachBottom() {
			if (this.isMore) {
				setTimeout(() => {
					this.getActiveList()
				}, 100)
			} else {
				uni.showToast({
					title: '暂无更多',
					icon: 'none'
				})
			}

		},
		onPullDownRefresh() {
			//刷新初始化数据
			this.init()
			//关闭刷新动画
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			
			init() {
				this.page = 1
				this.activityList = []
				this.getActiveList()
			},
			// 打卡时间
			getSignList() {
				const month = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
				this.month = month

				getSignList({
					month
				}).then(res => {
					if (res.code) {
						this.signList = res.data
						if (res.data && res.data.length) {
							res.data.map((item, idnex) => {
								if (item.sign_date) {
									const dateStr = item.sign_date;
									const date = new Date(dateStr);
									const day = date.getDate(); // 
									// this.list
									res.data.map((item, idnex) => {
										if (item.sign_date) {
											const dateStr = item.sign_date;
											const date = new Date(dateStr);
											const day = Number(date.getDate());  
											this.list[day-1].isClock =1
										}
									})
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}

				})
			},
			getUserInfo(){
				getUserInfo({
					token:this.token
				}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
						uni.setStorageSync('userinfo', res.data)
						uni.setStorageSync('token', res.data.token)
					}
				})
			},
			// 活动 列表
			getActiveList() {
				let params = {
					page: this.page,
					limit: 10
				}
				playList(params).then(res => {

					if (res.code == 1) {
						this.activityList = this.activityList.concat(res.data)
						if (res.data.length < 10) {
							this.isMore = false
						} else {
							this.isMore = true
							this.page++
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})
			},
			getVideoList() {
				healthartList({
					page: 1,
					limit: 10
				}).then(res => {
					this.videoList = res.data
				})
			},
			goDetails(item) {
				console.log(item)
			},
			getList() {
				// 获取当前日期
				const date = new Date();
				// 获取下个月的第0天（即当前月的最后一天）
				const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

				// 获取当月总天数
				const daysInMonth = lastDay.getDate();
				console.log(daysInMonth);
				let list = []
				for (var i = 0; i < daysInMonth; i++) {

					list.push({
						isClock: 0
					})
				}
				this.list = list
			},
			clock() {
				console.log(this.list);
				// 获取当前日期
				const date = new Date();
				console.log(date);
				if(this.token ){
					this.show = true
				}else{
					uni.showModal({
						confirmText:'去登录',
						title:'提示',
						content:'您还未登录，请先登录',
						success(e) {
							if(e.confirm){
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}
						}
					})
				}
				
			},
			goPoints() {
				uni.navigateTo({
					url: '/pageA/points/points'
				})
			},
			goVidoe(item) {
				uni.navigateTo({
					url: '/pageA/healthPassbook/details?id=' + item.id
				})
			},
			signAdd() {
				if (this.fileList1 && this.fileList1.length) {
					signAdd({
						sign_date: this.getCurrentDate(),
						image: this.fileList1[0].url
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '打卡成功',
								icon: 'none'
							})
							this.show = false
							this.getSignList()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				} else {
					uni.showToast({
						title: '请上传图片凭证',
						icon: 'none'
					})
				}
			},
			getCurrentDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				let token = uni.getStorageSync('token')
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $baseUrl.baseUrl + 'api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							token
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							resolve(data.data.fullurl)
						},
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.point-box {
		height: 220rpx;
		padding: 0 20rpx 0 40rpx;

		.fw-b {
			font-size: 56rpx
		}

		image {
			width: 26rpx;
			height: 26rpx;
			margin-left: 10rpx;
		}

		.btn-box {
			width: 160rpx;
			height: 66rpx;
			border-radius: 33rpx;
			text-align: center;
			line-height: 66rpx
		}
	}

	.clock-box {
		.days-box {
			align-items: baseline;
			height: 92rpx;
			padding-top: 18rpx;

			.margin-l-20 {
				font-weight: 500;
			}
		}

		.clock-title {
			line-height: 90rpx;
		}

		.clock-content {
			background: linear-gradient(138deg, #FBC467 0%, #E5A156 34%, #F2D5B6 58%, #E5A156 78%, #F2D3B2 100%);

			.clock-main {
				position: relative;
				min-height: 420rpx;

			}
		}

		.clock-btn-box {
			position: absolute;
			bottom: 20rpx;
			left: 10rpx;
			width: 630rpx;
			height: 93rpx;
			padding-top: 23rpx;
			padding-left: 30rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, #FFFFFF 100%);
			box-shadow: 0 -4rpx 10rpx 1px #FFFFFF;
			border-radius: 0 0 12rpx 12rpx;

			.btn-box {
				width: 600rpx;
				height: 70rpx;
				background: #E5A156;
				line-height: 70rpx;
				text-align: center;
				border-radius: 35rpx;
			}
		}
	}

	.clock-list-box {
		flex-wrap: wrap;
		padding-bottom: 60rpx;

		.clock-list {
			width: 80rpx;
			height: 120rpx;
			margin-right: 11rpx;
			margin-bottom: 8rpx;
			background: #F7F7F7;
			justify-content: center;

			&.active {
				background-color: #E5A156;

				.points {
					color: #fff;
				}

			}

			.img-box {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.color-9 {
				margin-top: 18rpx;
			}

			&:nth-child(7n) {
				margin-right: 0
			}
		}
	}

	.video-box {
		.video-list-content {
			padding-top: 10rpx;
			padding-bottom: 20rpx;
		}

		.video-title {
			padding: 50rpx 0 20rpx;
		}

		.img-box {
			min-width: 180rpx;

			image {
				width: 180rpx;
				height: 180rpx;
			}
		}

		.pay-btn {
			justify-content: center;
			width: 124rpx;
			height: 60rpx;
			background: #EFFBFE;
			border: 1px solid #43ABC4;

			image {
				width: 24rpx;
				height: 30rpx;
			}
		}
	}

	.service-title {
		height: 108rpx;
		align-items: center;

		text {
			font-size: 32rpx;
			color: #000;
			font-weight: bold;
		}

		.more {
			font-size: 24rpx;
			color: #808080;
		}

		.registration {
			position: relative;
			color: #43ABC4;
			font-size: 30rpx;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				height: 1px;
				width: 100%;
				background-color: #43ABC4;
			}
		}
	}

	.pop-box {
		border-radius: 20rpx 20rpx 0 0;

		.upload-image {
			padding: 30rpx 0;

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.pop-title {
			margin-top: 30rpx;
			margin-bottom: 20rpx;
		}

		.tips-box {
			image {
				width: 24rpx;
				min-width: 24rpx;
				margin-top: 10rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}

			text {
				color: #F3641E;
			}
		}

		.btn-box {
			height: 162rpx;
			padding: 10rpx 30rpx 0;

			.btn {
				height: 90rpx;
				background: #43ABC4;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
</style> -->